// components
$ele-button: 'el-button';
$ele-popper: 'el-popper';
$ele-tabs: 'el-tabs';
$ele-dropdown-menu: 'el-dropdown-menu';
$ele-table: 'el-table';
$ele-pagination: 'el-pagination';
$ele-card: 'el-card';
$ele-tree: 'el-tree';
$ele-descriptions: 'el-descriptions';
$ele-divider: 'el-divider';
$ele-alert: 'el-alert';
$ele-select-dropdown: 'el-select-dropdown';
$ele-tag: 'el-tag';
$ele-cascader-panel: 'el-cascader-panel';
$ele-input: 'el-input';
$ele-input-number: 'el-input-number';
$ele-date-table: 'el-date-table';
$ele-time-panel: 'el-time-panel';
$ele-progress: 'el-progress';
$ele-image: 'el-image';

.#{$ele-button} {
  &.is-text {
    padding: 0;

    &:not(.is-disabled):hover,
    &:not(.is-disabled):focus {
      background: none;
    }

    &:not(.is-disabled):hover {
      opacity: 0.6;
    }
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus,
  &:hover,
  &:focus,
  &:focus-visible {
    color: var(--el-button-text-color);
    background-color: var(--el-button-border-color);
    border-color: var(--el-button-bg-color);
  }

  &:hover {
    opacity: 0.8;
  }

  &:focus-visible {
    outline: none;
  }

  &.is-disabled {
    filter: brightness(1.2);
    opacity: 0.8;

    &:hover,
    &:focus {
      opacity: 0.6;
    }
  }
}

.#{$ele-popper} {
  &.is-light,
  &.is-dark {
    --el-bg-color-overlay: var(--background-primary-color);
    --el-text-color-regular: var(--text-primary-color);

    border: none;
  }
}

.#{$ele-tabs} {
  --el-border-color-light: var(--border-color-light);
  --el-text-color-primary: var(--text-primary-color);
}

.#{$ele-dropdown-menu} {
  &__item {
    &:not(.is-disabled) {
      &:focus {
        color: inherit;
        background: none;
        border: none;
      }

      &:hover {
        color: var(--text-regular-color);
        background: var(--background-regular-color);
      }
    }

    &--divided {
      --el-border-color-lighter: var(--border-color-light);
    }
  }
}

.#{$ele-table} {
  --el-table-bg-color: var(--background-main-color);
  --el-bg-color: var(--background-main-color);
  --el-table-header-bg-color: var(--background-main-color);
  --el-fill-color-lighter: var(--background-regular-color);
  --el-table-tr-bg-color: var(--background-primary-color);
  --el-table-row-hover-bg-color: var(--background-secondary-color);
}

.#{$ele-pagination} {
  --el-pagination-button-bg-color: var(--background-main-color);
  --el-pagination-hover-color: var(--primary-color);
}

.#{$ele-card} {
  --el-text-color-primary: var(--text-primary-color);
  --el-card-bg-color: var(--background-primary-color);
  --el-bg-color-overlay: var(--background-primary-color); /* fix dark */
}

.#{$ele-tree} {
  --el-tree-text-color: var(--text-primary-color);
  --el-fill-color-blank: transparent;
  --el-tree-node-hover-bg-color: var(--background-secondary-color);
}

.#{$ele-descriptions} {
  --el-text-color-regular: var(--text-main-color);
  --el-descriptions-item-bordered-label-background: var(--background-main-color);
  --el-text-color-primary: var(--text-primary-color);
  --el-fill-color-blank: transparent;
}

.#{$ele-divider} {
  --el-bg-color: var(--background-main-color);
  --el-border-color: var(--border-color);
}

.#{$ele-alert} {
  &--info {
    --el-alert-bg-color: var(--background-primary-color);
  }
}

.#{$ele-select-dropdown} {
  --el-fill-color-light: var(--background-secondary-color);
}

.#{$ele-tag} {
  &--light {
    --el-tag-bg-color: var(--background-secondary-color);
    --el-tag-border-color: var(--background-secondary-color);
  }

  &--info {
    --el-fill-color: var(--background-secondary-color);
    --el-color-info-light-9: var(--background-secondary-color); /* fix dark */
    --el-color-info-light-8: var(--background-secondary-color); /* fix dark */
  }
}

.#{$ele-cascader-panel} {
  --el-cascader-node-background-hover: var(--background-secondary-color);
}

.#{$ele-input} {
  --el-fill-color-light: var(--background-secondary-color);
}

.#{$ele-input-number} {
  --el-fill-color-light: var(--background-secondary-color);
}

.#{$ele-date-table} {
  --el-datepicker-inrange-bg-color: var(--background-secondary-color);
}

.#{$ele-time-panel} {
  --el-fill-color-light: var(--background-secondary-color);
}

.#{$ele-progress} {
  --el-border-color-lighter: var(--background-secondary-color);
}

.#{$ele-image} {
  --el-text-color-regular: var(--background-secondary-color);
}
